/**
 * desc:表格中展示找家纺商品信息html
 * @item {object} 商品的信息
 * @ismark {boolean} 是否展示已售罄，下架等遮罩
 * @onClick {func} 点击事件
 *
 */
import React from 'react';
import { Tooltip } from 'antd';
import styles from './index.module.less';
import { formatAmount, openUrl } from '@/utils/utils.jsx';
import CommonParagraph from '@/components/CommonParagraph';
import CommonZjfImg from '@/components/CommonImg/ZifComponent';
import CommonPlatformImg from '@/components/CommonImg/PlatformComponent';
import CommonTag from '@/components/CommonTag';

//isSys 是否是系统商品匹配的
export default ({ item = {}, onClick = null, isSys = false, showVipPrice = false}) => {
  const {
    matchType,
    matchingGoodsVOS,
    ecComposeVO,
    isCarefullySelected,
    outStoreSku,
    skuId,
    isDefault = 0,
  } = item;
  if (matchType == 1 || matchType == 3) {
    if (!matchingGoodsVOS.goodsId) {
      return null;
    }
    return (
      <div className={styles.wrap}>
        <div>
          <CommonZjfImg
            img={matchingGoodsVOS.goodsImage}
            storeId={matchingGoodsVOS.storeId}
            size="48"
            isCloudIcon={isCarefullySelected}
						style={{ marginRight: '8px' }}
            isMask={true}
            goodsStorage={matchingGoodsVOS.goodsStorage}
            goodsState={matchingGoodsVOS.goodsState}
          />
          {
            isDefault ? <div style={{marginTop: '6px'}}><CommonTag type='default'/></div>: ''
          }
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, marginLeft: '6px' }}>
          <Tooltip
            title={`【${matchingGoodsVOS.storeName}】${matchingGoodsVOS.goodsName} ${matchingGoodsVOS.goodsSpec}`}
          >
            <span
              className="textOverflowMultiThree common-color2"
              onClick={() =>
                matchType == 1 ? openUrl(`${GOODS_HREF}${matchingGoodsVOS.goodsId}`) : null//供应商匹配的商品不会有跳转链接。会有自定义图标的显示 type='custom'。
              }
              style={{ whiteSpace: 'pre-wrap' }}
            >
              【{matchingGoodsVOS.storeName}】{matchingGoodsVOS.goodsName}
              {matchingGoodsVOS.goodsSpec}
              <CommonParagraph
                text={`${matchingGoodsVOS.goodsName}${matchingGoodsVOS.goodsSpec}`}
              />
            </span>
          </Tooltip>
          <span style={{wordBreak:'break-all'}}>供应商商品编码：{matchType == '1' ? matchingGoodsVOS?.goodsId : isSys ? skuId: outStoreSku}</span>
          <span className="common-color5">
            价格：
            <span className="common-color9">
              ￥
              {matchingGoodsVOS.vipPrice && (matchingGoodsVOS.vipPrice < matchingGoodsVOS.goodsPrice)
                ? formatAmount(matchingGoodsVOS.vipPrice)
                : formatAmount(matchingGoodsVOS.goodsPrice)}
            </span>
          </span>
          {(!!matchingGoodsVOS.isCustom || matchType == 3) && <span><CommonTag type='custom'/></span>}
          {(matchingGoodsVOS.vipPrice && (matchingGoodsVOS.vipPrice < matchingGoodsVOS.goodsPrice) && showVipPrice) && <span><CommonTag type='isVipPrice'/></span>}
        </div>
      </div>
    );
  } else {
    if (!ecComposeVO.id) {
      return null;
    }
    return (
      <div
        className={styles.wrap}
        style={{ cursor: 'pointer' }}
        onClick={() => onClick(ecComposeVO.id, ecComposeVO.composeName)}
      >
        <div>
        <CommonPlatformImg img={ecComposeVO.composeImage} style={{ marginRight: '8px' }} isCloudIcon={isCarefullySelected == '1' ? true : false} />
        {
            isDefault ? <div style={{marginTop: '6px'}}><CommonTag type='default'/></div>: ''
        }
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, marginLeft: '6px'  }}>
          <span style={{ whiteSpace: 'pre-wrap' }} className="common-color2">
            {ecComposeVO.composeName}
            <CommonParagraph text={ecComposeVO.composeName} />
          </span>
          <span className="common-color5">
            价格：
            <span className="common-color9">
              ￥{formatAmount(ecComposeVO.composePrice)}
            </span>
          </span>
        </div>
      </div>
    );
  }
};
